<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>qweather-icons</title>

  <style>
    .icons {
      display: grid;
      max-width: 100%;
      grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
      gap: 1.25rem;
    }

    .icon {
      background-color: transparent;
      border-radius: .25rem;
      font-size: 1.5rem;
      text-align: center;
    }

    .label {
      font-family: qweather-icons;
    }

    .label {
      display: inline-block;
      width: 100%;
      overflow: hidden;
      font-size: .625rem;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  </style>

  <link rel="stylesheet" href="qweather-icons.css">
</head>
<body class="text-center">

<h1>qweather-icons</h1>

<div class="icons">
    <div class="icon">
      <i class="qi-100"></i>
    <div class="label">100</div>
  </div>
    <div class="icon">
      <i class="qi-101"></i>
    <div class="label">101</div>
  </div>
    <div class="icon">
      <i class="qi-102"></i>
    <div class="label">102</div>
  </div>
    <div class="icon">
      <i class="qi-103"></i>
    <div class="label">103</div>
  </div>
    <div class="icon">
      <i class="qi-104"></i>
    <div class="label">104</div>
  </div>
    <div class="icon">
      <i class="qi-150"></i>
    <div class="label">150</div>
  </div>
    <div class="icon">
      <i class="qi-151"></i>
    <div class="label">151</div>
  </div>
    <div class="icon">
      <i class="qi-152"></i>
    <div class="label">152</div>
  </div>
    <div class="icon">
      <i class="qi-153"></i>
    <div class="label">153</div>
  </div>
    <div class="icon">
      <i class="qi-300"></i>
    <div class="label">300</div>
  </div>
    <div class="icon">
      <i class="qi-301"></i>
    <div class="label">301</div>
  </div>
    <div class="icon">
      <i class="qi-302"></i>
    <div class="label">302</div>
  </div>
    <div class="icon">
      <i class="qi-303"></i>
    <div class="label">303</div>
  </div>
    <div class="icon">
      <i class="qi-304"></i>
    <div class="label">304</div>
  </div>
    <div class="icon">
      <i class="qi-305"></i>
    <div class="label">305</div>
  </div>
    <div class="icon">
      <i class="qi-306"></i>
    <div class="label">306</div>
  </div>
    <div class="icon">
      <i class="qi-307"></i>
    <div class="label">307</div>
  </div>
    <div class="icon">
      <i class="qi-308"></i>
    <div class="label">308</div>
  </div>
    <div class="icon">
      <i class="qi-309"></i>
    <div class="label">309</div>
  </div>
    <div class="icon">
      <i class="qi-310"></i>
    <div class="label">310</div>
  </div>
    <div class="icon">
      <i class="qi-311"></i>
    <div class="label">311</div>
  </div>
    <div class="icon">
      <i class="qi-312"></i>
    <div class="label">312</div>
  </div>
    <div class="icon">
      <i class="qi-313"></i>
    <div class="label">313</div>
  </div>
    <div class="icon">
      <i class="qi-314"></i>
    <div class="label">314</div>
  </div>
    <div class="icon">
      <i class="qi-315"></i>
    <div class="label">315</div>
  </div>
    <div class="icon">
      <i class="qi-316"></i>
    <div class="label">316</div>
  </div>
    <div class="icon">
      <i class="qi-317"></i>
    <div class="label">317</div>
  </div>
    <div class="icon">
      <i class="qi-318"></i>
    <div class="label">318</div>
  </div>
    <div class="icon">
      <i class="qi-350"></i>
    <div class="label">350</div>
  </div>
    <div class="icon">
      <i class="qi-351"></i>
    <div class="label">351</div>
  </div>
    <div class="icon">
      <i class="qi-399"></i>
    <div class="label">399</div>
  </div>
    <div class="icon">
      <i class="qi-400"></i>
    <div class="label">400</div>
  </div>
    <div class="icon">
      <i class="qi-401"></i>
    <div class="label">401</div>
  </div>
    <div class="icon">
      <i class="qi-402"></i>
    <div class="label">402</div>
  </div>
    <div class="icon">
      <i class="qi-403"></i>
    <div class="label">403</div>
  </div>
    <div class="icon">
      <i class="qi-404"></i>
    <div class="label">404</div>
  </div>
    <div class="icon">
      <i class="qi-405"></i>
    <div class="label">405</div>
  </div>
    <div class="icon">
      <i class="qi-406"></i>
    <div class="label">406</div>
  </div>
    <div class="icon">
      <i class="qi-407"></i>
    <div class="label">407</div>
  </div>
    <div class="icon">
      <i class="qi-408"></i>
    <div class="label">408</div>
  </div>
    <div class="icon">
      <i class="qi-409"></i>
    <div class="label">409</div>
  </div>
    <div class="icon">
      <i class="qi-410"></i>
    <div class="label">410</div>
  </div>
    <div class="icon">
      <i class="qi-456"></i>
    <div class="label">456</div>
  </div>
    <div class="icon">
      <i class="qi-457"></i>
    <div class="label">457</div>
  </div>
    <div class="icon">
      <i class="qi-499"></i>
    <div class="label">499</div>
  </div>
    <div class="icon">
      <i class="qi-500"></i>
    <div class="label">500</div>
  </div>
    <div class="icon">
      <i class="qi-501"></i>
    <div class="label">501</div>
  </div>
    <div class="icon">
      <i class="qi-502"></i>
    <div class="label">502</div>
  </div>
    <div class="icon">
      <i class="qi-503"></i>
    <div class="label">503</div>
  </div>
    <div class="icon">
      <i class="qi-504"></i>
    <div class="label">504</div>
  </div>
    <div class="icon">
      <i class="qi-507"></i>
    <div class="label">507</div>
  </div>
    <div class="icon">
      <i class="qi-508"></i>
    <div class="label">508</div>
  </div>
    <div class="icon">
      <i class="qi-509"></i>
    <div class="label">509</div>
  </div>
    <div class="icon">
      <i class="qi-510"></i>
    <div class="label">510</div>
  </div>
    <div class="icon">
      <i class="qi-511"></i>
    <div class="label">511</div>
  </div>
    <div class="icon">
      <i class="qi-512"></i>
    <div class="label">512</div>
  </div>
    <div class="icon">
      <i class="qi-513"></i>
    <div class="label">513</div>
  </div>
    <div class="icon">
      <i class="qi-514"></i>
    <div class="label">514</div>
  </div>
    <div class="icon">
      <i class="qi-515"></i>
    <div class="label">515</div>
  </div>
    <div class="icon">
      <i class="qi-800"></i>
    <div class="label">800</div>
  </div>
    <div class="icon">
      <i class="qi-801"></i>
    <div class="label">801</div>
  </div>
    <div class="icon">
      <i class="qi-802"></i>
    <div class="label">802</div>
  </div>
    <div class="icon">
      <i class="qi-803"></i>
    <div class="label">803</div>
  </div>
    <div class="icon">
      <i class="qi-804"></i>
    <div class="label">804</div>
  </div>
    <div class="icon">
      <i class="qi-805"></i>
    <div class="label">805</div>
  </div>
    <div class="icon">
      <i class="qi-806"></i>
    <div class="label">806</div>
  </div>
    <div class="icon">
      <i class="qi-807"></i>
    <div class="label">807</div>
  </div>
    <div class="icon">
      <i class="qi-900"></i>
    <div class="label">900</div>
  </div>
    <div class="icon">
      <i class="qi-901"></i>
    <div class="label">901</div>
  </div>
    <div class="icon">
      <i class="qi-999"></i>
    <div class="label">999</div>
  </div>
    <div class="icon">
      <i class="qi-1001"></i>
    <div class="label">1001</div>
  </div>
    <div class="icon">
      <i class="qi-1002"></i>
    <div class="label">1002</div>
  </div>
    <div class="icon">
      <i class="qi-1003"></i>
    <div class="label">1003</div>
  </div>
    <div class="icon">
      <i class="qi-1004"></i>
    <div class="label">1004</div>
  </div>
    <div class="icon">
      <i class="qi-1005"></i>
    <div class="label">1005</div>
  </div>
    <div class="icon">
      <i class="qi-1006"></i>
    <div class="label">1006</div>
  </div>
    <div class="icon">
      <i class="qi-1007"></i>
    <div class="label">1007</div>
  </div>
    <div class="icon">
      <i class="qi-1008"></i>
    <div class="label">1008</div>
  </div>
    <div class="icon">
      <i class="qi-1009"></i>
    <div class="label">1009</div>
  </div>
    <div class="icon">
      <i class="qi-1010"></i>
    <div class="label">1010</div>
  </div>
    <div class="icon">
      <i class="qi-1011"></i>
    <div class="label">1011</div>
  </div>
    <div class="icon">
      <i class="qi-1012"></i>
    <div class="label">1012</div>
  </div>
    <div class="icon">
      <i class="qi-1013"></i>
    <div class="label">1013</div>
  </div>
    <div class="icon">
      <i class="qi-1014"></i>
    <div class="label">1014</div>
  </div>
    <div class="icon">
      <i class="qi-1015"></i>
    <div class="label">1015</div>
  </div>
    <div class="icon">
      <i class="qi-1016"></i>
    <div class="label">1016</div>
  </div>
    <div class="icon">
      <i class="qi-1017"></i>
    <div class="label">1017</div>
  </div>
    <div class="icon">
      <i class="qi-1018"></i>
    <div class="label">1018</div>
  </div>
    <div class="icon">
      <i class="qi-1019"></i>
    <div class="label">1019</div>
  </div>
    <div class="icon">
      <i class="qi-1020"></i>
    <div class="label">1020</div>
  </div>
    <div class="icon">
      <i class="qi-1021"></i>
    <div class="label">1021</div>
  </div>
    <div class="icon">
      <i class="qi-1022"></i>
    <div class="label">1022</div>
  </div>
    <div class="icon">
      <i class="qi-1023"></i>
    <div class="label">1023</div>
  </div>
    <div class="icon">
      <i class="qi-1024"></i>
    <div class="label">1024</div>
  </div>
    <div class="icon">
      <i class="qi-1025"></i>
    <div class="label">1025</div>
  </div>
    <div class="icon">
      <i class="qi-1026"></i>
    <div class="label">1026</div>
  </div>
    <div class="icon">
      <i class="qi-1027"></i>
    <div class="label">1027</div>
  </div>
    <div class="icon">
      <i class="qi-1028"></i>
    <div class="label">1028</div>
  </div>
    <div class="icon">
      <i class="qi-1029"></i>
    <div class="label">1029</div>
  </div>
    <div class="icon">
      <i class="qi-1030"></i>
    <div class="label">1030</div>
  </div>
    <div class="icon">
      <i class="qi-1031"></i>
    <div class="label">1031</div>
  </div>
    <div class="icon">
      <i class="qi-1032"></i>
    <div class="label">1032</div>
  </div>
    <div class="icon">
      <i class="qi-1033"></i>
    <div class="label">1033</div>
  </div>
    <div class="icon">
      <i class="qi-1034"></i>
    <div class="label">1034</div>
  </div>
    <div class="icon">
      <i class="qi-1035"></i>
    <div class="label">1035</div>
  </div>
    <div class="icon">
      <i class="qi-1036"></i>
    <div class="label">1036</div>
  </div>
    <div class="icon">
      <i class="qi-1037"></i>
    <div class="label">1037</div>
  </div>
    <div class="icon">
      <i class="qi-1038"></i>
    <div class="label">1038</div>
  </div>
    <div class="icon">
      <i class="qi-1039"></i>
    <div class="label">1039</div>
  </div>
    <div class="icon">
      <i class="qi-1040"></i>
    <div class="label">1040</div>
  </div>
    <div class="icon">
      <i class="qi-1041"></i>
    <div class="label">1041</div>
  </div>
    <div class="icon">
      <i class="qi-1042"></i>
    <div class="label">1042</div>
  </div>
    <div class="icon">
      <i class="qi-1043"></i>
    <div class="label">1043</div>
  </div>
    <div class="icon">
      <i class="qi-1044"></i>
    <div class="label">1044</div>
  </div>
    <div class="icon">
      <i class="qi-1045"></i>
    <div class="label">1045</div>
  </div>
    <div class="icon">
      <i class="qi-1046"></i>
    <div class="label">1046</div>
  </div>
    <div class="icon">
      <i class="qi-1047"></i>
    <div class="label">1047</div>
  </div>
    <div class="icon">
      <i class="qi-1048"></i>
    <div class="label">1048</div>
  </div>
    <div class="icon">
      <i class="qi-1049"></i>
    <div class="label">1049</div>
  </div>
    <div class="icon">
      <i class="qi-1050"></i>
    <div class="label">1050</div>
  </div>
    <div class="icon">
      <i class="qi-1051"></i>
    <div class="label">1051</div>
  </div>
    <div class="icon">
      <i class="qi-1052"></i>
    <div class="label">1052</div>
  </div>
    <div class="icon">
      <i class="qi-1053"></i>
    <div class="label">1053</div>
  </div>
    <div class="icon">
      <i class="qi-1054"></i>
    <div class="label">1054</div>
  </div>
    <div class="icon">
      <i class="qi-1055"></i>
    <div class="label">1055</div>
  </div>
    <div class="icon">
      <i class="qi-1056"></i>
    <div class="label">1056</div>
  </div>
    <div class="icon">
      <i class="qi-1057"></i>
    <div class="label">1057</div>
  </div>
    <div class="icon">
      <i class="qi-1058"></i>
    <div class="label">1058</div>
  </div>
    <div class="icon">
      <i class="qi-1059"></i>
    <div class="label">1059</div>
  </div>
    <div class="icon">
      <i class="qi-1061"></i>
    <div class="label">1061</div>
  </div>
    <div class="icon">
      <i class="qi-1064"></i>
    <div class="label">1064</div>
  </div>
    <div class="icon">
      <i class="qi-1101"></i>
    <div class="label">1101</div>
  </div>
    <div class="icon">
      <i class="qi-1302"></i>
    <div class="label">1302</div>
  </div>
    <div class="icon">
      <i class="qi-1402"></i>
    <div class="label">1402</div>
  </div>
    <div class="icon">
      <i class="qi-1601"></i>
    <div class="label">1601</div>
  </div>
    <div class="icon">
      <i class="qi-1602"></i>
    <div class="label">1602</div>
  </div>
    <div class="icon">
      <i class="qi-1603"></i>
    <div class="label">1603</div>
  </div>
    <div class="icon">
      <i class="qi-1604"></i>
    <div class="label">1604</div>
  </div>
    <div class="icon">
      <i class="qi-1605"></i>
    <div class="label">1605</div>
  </div>
    <div class="icon">
      <i class="qi-1606"></i>
    <div class="label">1606</div>
  </div>
    <div class="icon">
      <i class="qi-1607"></i>
    <div class="label">1607</div>
  </div>
    <div class="icon">
      <i class="qi-2001"></i>
    <div class="label">2001</div>
  </div>
    <div class="icon">
      <i class="qi-2002"></i>
    <div class="label">2002</div>
  </div>
    <div class="icon">
      <i class="qi-2003"></i>
    <div class="label">2003</div>
  </div>
    <div class="icon">
      <i class="qi-2004"></i>
    <div class="label">2004</div>
  </div>
    <div class="icon">
      <i class="qi-2005"></i>
    <div class="label">2005</div>
  </div>
    <div class="icon">
      <i class="qi-2006"></i>
    <div class="label">2006</div>
  </div>
    <div class="icon">
      <i class="qi-2007"></i>
    <div class="label">2007</div>
  </div>
    <div class="icon">
      <i class="qi-2008"></i>
    <div class="label">2008</div>
  </div>
    <div class="icon">
      <i class="qi-2009"></i>
    <div class="label">2009</div>
  </div>
    <div class="icon">
      <i class="qi-2010"></i>
    <div class="label">2010</div>
  </div>
    <div class="icon">
      <i class="qi-2011"></i>
    <div class="label">2011</div>
  </div>
    <div class="icon">
      <i class="qi-2012"></i>
    <div class="label">2012</div>
  </div>
    <div class="icon">
      <i class="qi-2013"></i>
    <div class="label">2013</div>
  </div>
    <div class="icon">
      <i class="qi-2014"></i>
    <div class="label">2014</div>
  </div>
    <div class="icon">
      <i class="qi-2015"></i>
    <div class="label">2015</div>
  </div>
    <div class="icon">
      <i class="qi-2016"></i>
    <div class="label">2016</div>
  </div>
    <div class="icon">
      <i class="qi-2017"></i>
    <div class="label">2017</div>
  </div>
    <div class="icon">
      <i class="qi-2018"></i>
    <div class="label">2018</div>
  </div>
    <div class="icon">
      <i class="qi-2019"></i>
    <div class="label">2019</div>
  </div>
    <div class="icon">
      <i class="qi-2020"></i>
    <div class="label">2020</div>
  </div>
    <div class="icon">
      <i class="qi-2021"></i>
    <div class="label">2021</div>
  </div>
    <div class="icon">
      <i class="qi-2022"></i>
    <div class="label">2022</div>
  </div>
    <div class="icon">
      <i class="qi-2023"></i>
    <div class="label">2023</div>
  </div>
    <div class="icon">
      <i class="qi-2024"></i>
    <div class="label">2024</div>
  </div>
    <div class="icon">
      <i class="qi-2025"></i>
    <div class="label">2025</div>
  </div>
    <div class="icon">
      <i class="qi-2026"></i>
    <div class="label">2026</div>
  </div>
    <div class="icon">
      <i class="qi-2027"></i>
    <div class="label">2027</div>
  </div>
    <div class="icon">
      <i class="qi-2028"></i>
    <div class="label">2028</div>
  </div>
    <div class="icon">
      <i class="qi-9998"></i>
    <div class="label">9998</div>
  </div>
    <div class="icon">
      <i class="qi-9999"></i>
    <div class="label">9999</div>
  </div>
    <div class="icon">
      <i class="qi-100-fill"></i>
    <div class="label">100-fill</div>
  </div>
    <div class="icon">
      <i class="qi-101-fill"></i>
    <div class="label">101-fill</div>
  </div>
    <div class="icon">
      <i class="qi-102-fill"></i>
    <div class="label">102-fill</div>
  </div>
    <div class="icon">
      <i class="qi-103-fill"></i>
    <div class="label">103-fill</div>
  </div>
    <div class="icon">
      <i class="qi-104-fill"></i>
    <div class="label">104-fill</div>
  </div>
    <div class="icon">
      <i class="qi-150-fill"></i>
    <div class="label">150-fill</div>
  </div>
    <div class="icon">
      <i class="qi-151-fill"></i>
    <div class="label">151-fill</div>
  </div>
    <div class="icon">
      <i class="qi-152-fill"></i>
    <div class="label">152-fill</div>
  </div>
    <div class="icon">
      <i class="qi-153-fill"></i>
    <div class="label">153-fill</div>
  </div>
    <div class="icon">
      <i class="qi-300-fill"></i>
    <div class="label">300-fill</div>
  </div>
    <div class="icon">
      <i class="qi-301-fill"></i>
    <div class="label">301-fill</div>
  </div>
    <div class="icon">
      <i class="qi-302-fill"></i>
    <div class="label">302-fill</div>
  </div>
    <div class="icon">
      <i class="qi-303-fill"></i>
    <div class="label">303-fill</div>
  </div>
    <div class="icon">
      <i class="qi-304-fill"></i>
    <div class="label">304-fill</div>
  </div>
    <div class="icon">
      <i class="qi-305-fill"></i>
    <div class="label">305-fill</div>
  </div>
    <div class="icon">
      <i class="qi-306-fill"></i>
    <div class="label">306-fill</div>
  </div>
    <div class="icon">
      <i class="qi-307-fill"></i>
    <div class="label">307-fill</div>
  </div>
    <div class="icon">
      <i class="qi-308-fill"></i>
    <div class="label">308-fill</div>
  </div>
    <div class="icon">
      <i class="qi-309-fill"></i>
    <div class="label">309-fill</div>
  </div>
    <div class="icon">
      <i class="qi-310-fill"></i>
    <div class="label">310-fill</div>
  </div>
    <div class="icon">
      <i class="qi-311-fill"></i>
    <div class="label">311-fill</div>
  </div>
    <div class="icon">
      <i class="qi-312-fill"></i>
    <div class="label">312-fill</div>
  </div>
    <div class="icon">
      <i class="qi-313-fill"></i>
    <div class="label">313-fill</div>
  </div>
    <div class="icon">
      <i class="qi-314-fill"></i>
    <div class="label">314-fill</div>
  </div>
    <div class="icon">
      <i class="qi-315-fill"></i>
    <div class="label">315-fill</div>
  </div>
    <div class="icon">
      <i class="qi-316-fill"></i>
    <div class="label">316-fill</div>
  </div>
    <div class="icon">
      <i class="qi-317-fill"></i>
    <div class="label">317-fill</div>
  </div>
    <div class="icon">
      <i class="qi-318-fill"></i>
    <div class="label">318-fill</div>
  </div>
    <div class="icon">
      <i class="qi-350-fill"></i>
    <div class="label">350-fill</div>
  </div>
    <div class="icon">
      <i class="qi-351-fill"></i>
    <div class="label">351-fill</div>
  </div>
    <div class="icon">
      <i class="qi-399-fill"></i>
    <div class="label">399-fill</div>
  </div>
    <div class="icon">
      <i class="qi-400-fill"></i>
    <div class="label">400-fill</div>
  </div>
    <div class="icon">
      <i class="qi-401-fill"></i>
    <div class="label">401-fill</div>
  </div>
    <div class="icon">
      <i class="qi-402-fill"></i>
    <div class="label">402-fill</div>
  </div>
    <div class="icon">
      <i class="qi-403-fill"></i>
    <div class="label">403-fill</div>
  </div>
    <div class="icon">
      <i class="qi-404-fill"></i>
    <div class="label">404-fill</div>
  </div>
    <div class="icon">
      <i class="qi-405-fill"></i>
    <div class="label">405-fill</div>
  </div>
    <div class="icon">
      <i class="qi-406-fill"></i>
    <div class="label">406-fill</div>
  </div>
    <div class="icon">
      <i class="qi-407-fill"></i>
    <div class="label">407-fill</div>
  </div>
    <div class="icon">
      <i class="qi-408-fill"></i>
    <div class="label">408-fill</div>
  </div>
    <div class="icon">
      <i class="qi-409-fill"></i>
    <div class="label">409-fill</div>
  </div>
    <div class="icon">
      <i class="qi-410-fill"></i>
    <div class="label">410-fill</div>
  </div>
    <div class="icon">
      <i class="qi-456-fill"></i>
    <div class="label">456-fill</div>
  </div>
    <div class="icon">
      <i class="qi-457-fill"></i>
    <div class="label">457-fill</div>
  </div>
    <div class="icon">
      <i class="qi-499-fill"></i>
    <div class="label">499-fill</div>
  </div>
    <div class="icon">
      <i class="qi-500-fill"></i>
    <div class="label">500-fill</div>
  </div>
    <div class="icon">
      <i class="qi-501-fill"></i>
    <div class="label">501-fill</div>
  </div>
    <div class="icon">
      <i class="qi-502-fill"></i>
    <div class="label">502-fill</div>
  </div>
    <div class="icon">
      <i class="qi-503-fill"></i>
    <div class="label">503-fill</div>
  </div>
    <div class="icon">
      <i class="qi-504-fill"></i>
    <div class="label">504-fill</div>
  </div>
    <div class="icon">
      <i class="qi-507-fill"></i>
    <div class="label">507-fill</div>
  </div>
    <div class="icon">
      <i class="qi-508-fill"></i>
    <div class="label">508-fill</div>
  </div>
    <div class="icon">
      <i class="qi-509-fill"></i>
    <div class="label">509-fill</div>
  </div>
    <div class="icon">
      <i class="qi-510-fill"></i>
    <div class="label">510-fill</div>
  </div>
    <div class="icon">
      <i class="qi-511-fill"></i>
    <div class="label">511-fill</div>
  </div>
    <div class="icon">
      <i class="qi-512-fill"></i>
    <div class="label">512-fill</div>
  </div>
    <div class="icon">
      <i class="qi-513-fill"></i>
    <div class="label">513-fill</div>
  </div>
    <div class="icon">
      <i class="qi-514-fill"></i>
    <div class="label">514-fill</div>
  </div>
    <div class="icon">
      <i class="qi-515-fill"></i>
    <div class="label">515-fill</div>
  </div>
    <div class="icon">
      <i class="qi-900-fill"></i>
    <div class="label">900-fill</div>
  </div>
    <div class="icon">
      <i class="qi-901-fill"></i>
    <div class="label">901-fill</div>
  </div>
    <div class="icon">
      <i class="qi-999-fill"></i>
    <div class="label">999-fill</div>
  </div>
    <div class="icon">
      <i class="qi-sunny"></i>
    <div class="label">sunny</div>
  </div>
    <div class="icon">
      <i class="qi-cloudy"></i>
    <div class="label">cloudy</div>
  </div>
    <div class="icon">
      <i class="qi-few-clouds"></i>
    <div class="label">few-clouds</div>
  </div>
    <div class="icon">
      <i class="qi-partly-cloudy"></i>
    <div class="label">partly-cloudy</div>
  </div>
    <div class="icon">
      <i class="qi-overcast"></i>
    <div class="label">overcast</div>
  </div>
    <div class="icon">
      <i class="qi-clear-night"></i>
    <div class="label">clear-night</div>
  </div>
    <div class="icon">
      <i class="qi-cloudy-night"></i>
    <div class="label">cloudy-night</div>
  </div>
    <div class="icon">
      <i class="qi-few-clouds-night"></i>
    <div class="label">few-clouds-night</div>
  </div>
    <div class="icon">
      <i class="qi-partly-cloudy-night"></i>
    <div class="label">partly-cloudy-night</div>
  </div>
    <div class="icon">
      <i class="qi-shower-rain"></i>
    <div class="label">shower-rain</div>
  </div>
    <div class="icon">
      <i class="qi-heavy-shower-rain"></i>
    <div class="label">heavy-shower-rain</div>
  </div>
    <div class="icon">
      <i class="qi-thundershower"></i>
    <div class="label">thundershower</div>
  </div>
    <div class="icon">
      <i class="qi-heavy-thunderstorm"></i>
    <div class="label">heavy-thunderstorm</div>
  </div>
    <div class="icon">
      <i class="qi-thundershower-with-hail"></i>
    <div class="label">thundershower-with-hail</div>
  </div>
    <div class="icon">
      <i class="qi-light-rain"></i>
    <div class="label">light-rain</div>
  </div>
    <div class="icon">
      <i class="qi-moderate-rain"></i>
    <div class="label">moderate-rain</div>
  </div>
    <div class="icon">
      <i class="qi-heavy-rain"></i>
    <div class="label">heavy-rain</div>
  </div>
    <div class="icon">
      <i class="qi-extreme-rain"></i>
    <div class="label">extreme-rain</div>
  </div>
    <div class="icon">
      <i class="qi-drizzle-rain"></i>
    <div class="label">drizzle-rain</div>
  </div>
    <div class="icon">
      <i class="qi-storm"></i>
    <div class="label">storm</div>
  </div>
    <div class="icon">
      <i class="qi-heavy-storm"></i>
    <div class="label">heavy-storm</div>
  </div>
    <div class="icon">
      <i class="qi-severe-storm"></i>
    <div class="label">severe-storm</div>
  </div>
    <div class="icon">
      <i class="qi-freezing-rain"></i>
    <div class="label">freezing-rain</div>
  </div>
    <div class="icon">
      <i class="qi-light-to-moderate-rain"></i>
    <div class="label">light-to-moderate-rain</div>
  </div>
    <div class="icon">
      <i class="qi-moderate-to-heavy-rain"></i>
    <div class="label">moderate-to-heavy-rain</div>
  </div>
    <div class="icon">
      <i class="qi-heavy-rain-to-storm"></i>
    <div class="label">heavy-rain-to-storm</div>
  </div>
    <div class="icon">
      <i class="qi-storm-to-heavy-storm"></i>
    <div class="label">storm-to-heavy-storm</div>
  </div>
    <div class="icon">
      <i class="qi-heavy-to-severe-storm"></i>
    <div class="label">heavy-to-severe-storm</div>
  </div>
    <div class="icon">
      <i class="qi-shower-rain-night"></i>
    <div class="label">shower-rain-night</div>
  </div>
    <div class="icon">
      <i class="qi-heavy-shower-rain-night"></i>
    <div class="label">heavy-shower-rain-night</div>
  </div>
    <div class="icon">
      <i class="qi-rain"></i>
    <div class="label">rain</div>
  </div>
    <div class="icon">
      <i class="qi-light-snow"></i>
    <div class="label">light-snow</div>
  </div>
    <div class="icon">
      <i class="qi-moderate-snow"></i>
    <div class="label">moderate-snow</div>
  </div>
    <div class="icon">
      <i class="qi-heavy-snow"></i>
    <div class="label">heavy-snow</div>
  </div>
    <div class="icon">
      <i class="qi-snowstorm"></i>
    <div class="label">snowstorm</div>
  </div>
    <div class="icon">
      <i class="qi-sleet"></i>
    <div class="label">sleet</div>
  </div>
    <div class="icon">
      <i class="qi-rain-and-snow"></i>
    <div class="label">rain-and-snow</div>
  </div>
    <div class="icon">
      <i class="qi-shower-snow"></i>
    <div class="label">shower-snow</div>
  </div>
    <div class="icon">
      <i class="qi-snow-flurry"></i>
    <div class="label">snow-flurry</div>
  </div>
    <div class="icon">
      <i class="qi-light-to-moderate-snow"></i>
    <div class="label">light-to-moderate-snow</div>
  </div>
    <div class="icon">
      <i class="qi-moderate-to-heavy-snow"></i>
    <div class="label">moderate-to-heavy-snow</div>
  </div>
    <div class="icon">
      <i class="qi-heavy-snow-to-snowstorm"></i>
    <div class="label">heavy-snow-to-snowstorm</div>
  </div>
    <div class="icon">
      <i class="qi-shower-snow-night"></i>
    <div class="label">shower-snow-night</div>
  </div>
    <div class="icon">
      <i class="qi-snow-flurry-night"></i>
    <div class="label">snow-flurry-night</div>
  </div>
    <div class="icon">
      <i class="qi-snow"></i>
    <div class="label">snow</div>
  </div>
    <div class="icon">
      <i class="qi-mist"></i>
    <div class="label">mist</div>
  </div>
    <div class="icon">
      <i class="qi-foggy"></i>
    <div class="label">foggy</div>
  </div>
    <div class="icon">
      <i class="qi-haze"></i>
    <div class="label">haze</div>
  </div>
    <div class="icon">
      <i class="qi-sand"></i>
    <div class="label">sand</div>
  </div>
    <div class="icon">
      <i class="qi-dust"></i>
    <div class="label">dust</div>
  </div>
    <div class="icon">
      <i class="qi-duststorm"></i>
    <div class="label">duststorm</div>
  </div>
    <div class="icon">
      <i class="qi-sandstorm"></i>
    <div class="label">sandstorm</div>
  </div>
    <div class="icon">
      <i class="qi-dense-fog"></i>
    <div class="label">dense-fog</div>
  </div>
    <div class="icon">
      <i class="qi-strong-fog"></i>
    <div class="label">strong-fog</div>
  </div>
    <div class="icon">
      <i class="qi-moderate-haze"></i>
    <div class="label">moderate-haze</div>
  </div>
    <div class="icon">
      <i class="qi-heavy-haze"></i>
    <div class="label">heavy-haze</div>
  </div>
    <div class="icon">
      <i class="qi-severe-haze"></i>
    <div class="label">severe-haze</div>
  </div>
    <div class="icon">
      <i class="qi-heavy-fog"></i>
    <div class="label">heavy-fog</div>
  </div>
    <div class="icon">
      <i class="qi-extra-heavy-fog"></i>
    <div class="label">extra-heavy-fog</div>
  </div>
    <div class="icon">
      <i class="qi-new-moon"></i>
    <div class="label">new-moon</div>
  </div>
    <div class="icon">
      <i class="qi-waxing-crescent"></i>
    <div class="label">waxing-crescent</div>
  </div>
    <div class="icon">
      <i class="qi-first-quarter"></i>
    <div class="label">first-quarter</div>
  </div>
    <div class="icon">
      <i class="qi-waxing-gibbous"></i>
    <div class="label">waxing-gibbous</div>
  </div>
    <div class="icon">
      <i class="qi-full-moon"></i>
    <div class="label">full-moon</div>
  </div>
    <div class="icon">
      <i class="qi-waning-gibbous"></i>
    <div class="label">waning-gibbous</div>
  </div>
    <div class="icon">
      <i class="qi-last-quarter"></i>
    <div class="label">last-quarter</div>
  </div>
    <div class="icon">
      <i class="qi-waning-crescent"></i>
    <div class="label">waning-crescent</div>
  </div>
    <div class="icon">
      <i class="qi-hot"></i>
    <div class="label">hot</div>
  </div>
    <div class="icon">
      <i class="qi-cold"></i>
    <div class="label">cold</div>
  </div>
    <div class="icon">
      <i class="qi-unknown"></i>
    <div class="label">unknown</div>
  </div>
    <div class="icon">
      <i class="qi-typhoon"></i>
    <div class="label">typhoon</div>
  </div>
    <div class="icon">
      <i class="qi-tornado"></i>
    <div class="label">tornado</div>
  </div>
    <div class="icon">
      <i class="qi-rainstorm"></i>
    <div class="label">rainstorm</div>
  </div>
    <div class="icon">
      <i class="qi-snow-storm"></i>
    <div class="label">snow-storm</div>
  </div>
    <div class="icon">
      <i class="qi-cold-wave"></i>
    <div class="label">cold-wave</div>
  </div>
    <div class="icon">
      <i class="qi-gale"></i>
    <div class="label">gale</div>
  </div>
    <div class="icon">
      <i class="qi-sandstorm-warning"></i>
    <div class="label">sandstorm-warning</div>
  </div>
    <div class="icon">
      <i class="qi-low-temperature-freeze"></i>
    <div class="label">low-temperature-freeze</div>
  </div>
    <div class="icon">
      <i class="qi-high-temperature"></i>
    <div class="label">high-temperature</div>
  </div>
    <div class="icon">
      <i class="qi-heat-wave"></i>
    <div class="label">heat-wave</div>
  </div>
    <div class="icon">
      <i class="qi-dry-hot-air"></i>
    <div class="label">dry-hot-air</div>
  </div>
    <div class="icon">
      <i class="qi-downburst"></i>
    <div class="label">downburst</div>
  </div>
    <div class="icon">
      <i class="qi-avalanche"></i>
    <div class="label">avalanche</div>
  </div>
    <div class="icon">
      <i class="qi-lightning"></i>
    <div class="label">lightning</div>
  </div>
    <div class="icon">
      <i class="qi-hail"></i>
    <div class="label">hail</div>
  </div>
    <div class="icon">
      <i class="qi-frost"></i>
    <div class="label">frost</div>
  </div>
    <div class="icon">
      <i class="qi-heavy-fog-warning"></i>
    <div class="label">heavy-fog-warning</div>
  </div>
    <div class="icon">
      <i class="qi-low-level-wind-shearl"></i>
    <div class="label">low-level-wind-shearl</div>
  </div>
    <div class="icon">
      <i class="qi-haze-warning"></i>
    <div class="label">haze-warning</div>
  </div>
    <div class="icon">
      <i class="qi-thunder-gust"></i>
    <div class="label">thunder-gust</div>
  </div>
    <div class="icon">
      <i class="qi-road-icing"></i>
    <div class="label">road-icing</div>
  </div>
    <div class="icon">
      <i class="qi-drought"></i>
    <div class="label">drought</div>
  </div>
    <div class="icon">
      <i class="qi-gale-at-sea"></i>
    <div class="label">gale-at-sea</div>
  </div>
    <div class="icon">
      <i class="qi-heat-stroke"></i>
    <div class="label">heat-stroke</div>
  </div>
    <div class="icon">
      <i class="qi-wildfire"></i>
    <div class="label">wildfire</div>
  </div>
    <div class="icon">
      <i class="qi-grassland-fire"></i>
    <div class="label">grassland-fire</div>
  </div>
    <div class="icon">
      <i class="qi-freeze"></i>
    <div class="label">freeze</div>
  </div>
    <div class="icon">
      <i class="qi-space-weather"></i>
    <div class="label">space-weather</div>
  </div>
    <div class="icon">
      <i class="qi-heavy-air-pollution"></i>
    <div class="label">heavy-air-pollution</div>
  </div>
    <div class="icon">
      <i class="qi-low-temperature-rain-and-snow"></i>
    <div class="label">low-temperature-rain-and-snow</div>
  </div>
    <div class="icon">
      <i class="qi-strong-convection"></i>
    <div class="label">strong-convection</div>
  </div>
    <div class="icon">
      <i class="qi-ozone"></i>
    <div class="label">ozone</div>
  </div>
    <div class="icon">
      <i class="qi-heavy-snow-warning"></i>
    <div class="label">heavy-snow-warning</div>
  </div>
    <div class="icon">
      <i class="qi-cold-warning"></i>
    <div class="label">cold-warning</div>
  </div>
    <div class="icon">
      <i class="qi-continuous-rain"></i>
    <div class="label">continuous-rain</div>
  </div>
    <div class="icon">
      <i class="qi-waterlogging"></i>
    <div class="label">waterlogging</div>
  </div>
    <div class="icon">
      <i class="qi-geological-hazard"></i>
    <div class="label">geological-hazard</div>
  </div>
    <div class="icon">
      <i class="qi-heavy-rainfall"></i>
    <div class="label">heavy-rainfall</div>
  </div>
    <div class="icon">
      <i class="qi-severely-falling-temperature"></i>
    <div class="label">severely-falling-temperature</div>
  </div>
    <div class="icon">
      <i class="qi-snow-disaster"></i>
    <div class="label">snow-disaster</div>
  </div>
    <div class="icon">
      <i class="qi-wildfire-grassland"></i>
    <div class="label">wildfire-grassland</div>
  </div>
    <div class="icon">
      <i class="qi-medical-meteorology"></i>
    <div class="label">medical-meteorology</div>
  </div>
    <div class="icon">
      <i class="qi-thunderstorm"></i>
    <div class="label">thunderstorm</div>
  </div>
    <div class="icon">
      <i class="qi-school-closure"></i>
    <div class="label">school-closure</div>
  </div>
    <div class="icon">
      <i class="qi-factory-closure"></i>
    <div class="label">factory-closure</div>
  </div>
    <div class="icon">
      <i class="qi-maritime-risk"></i>
    <div class="label">maritime-risk</div>
  </div>
    <div class="icon">
      <i class="qi-spring-dust"></i>
    <div class="label">spring-dust</div>
  </div>
    <div class="icon">
      <i class="qi-falling-temperature"></i>
    <div class="label">falling-temperature</div>
  </div>
    <div class="icon">
      <i class="qi-typhoon-and-rainstorm"></i>
    <div class="label">typhoon-and-rainstorm</div>
  </div>
    <div class="icon">
      <i class="qi-severe-cold"></i>
    <div class="label">severe-cold</div>
  </div>
    <div class="icon">
      <i class="qi-sand-dust"></i>
    <div class="label">sand-dust</div>
  </div>
    <div class="icon">
      <i class="qi-sea-thunderstorms"></i>
    <div class="label">sea-thunderstorms</div>
  </div>
    <div class="icon">
      <i class="qi-sea-fog"></i>
    <div class="label">sea-fog</div>
  </div>
    <div class="icon">
      <i class="qi-sea-thunder"></i>
    <div class="label">sea-thunder</div>
  </div>
    <div class="icon">
      <i class="qi-sea-typhoon"></i>
    <div class="label">sea-typhoon</div>
  </div>
    <div class="icon">
      <i class="qi-low-temperature"></i>
    <div class="label">low-temperature</div>
  </div>
    <div class="icon">
      <i class="qi-road-ice-and-snow"></i>
    <div class="label">road-ice-and-snow</div>
  </div>
    <div class="icon">
      <i class="qi-thunderstorm-and-gale"></i>
    <div class="label">thunderstorm-and-gale</div>
  </div>
    <div class="icon">
      <i class="qi-continuous-low-temperature"></i>
    <div class="label">continuous-low-temperature</div>
  </div>
    <div class="icon">
      <i class="qi-strong-dust"></i>
    <div class="label">strong-dust</div>
  </div>
    <div class="icon">
      <i class="qi-short-lived-heavy-shower-rain"></i>
    <div class="label">short-lived-heavy-shower-rain</div>
  </div>
    <div class="icon">
      <i class="qi-flood"></i>
    <div class="label">flood</div>
  </div>
    <div class="icon">
      <i class="qi-mudflow"></i>
    <div class="label">mudflow</div>
  </div>
    <div class="icon">
      <i class="qi-storm-surge"></i>
    <div class="label">storm-surge</div>
  </div>
    <div class="icon">
      <i class="qi-very-hot-weather"></i>
    <div class="label">very-hot-weather</div>
  </div>
    <div class="icon">
      <i class="qi-strong-monsoon-signal"></i>
    <div class="label">strong-monsoon-signal</div>
  </div>
    <div class="icon">
      <i class="qi-landslip"></i>
    <div class="label">landslip</div>
  </div>
    <div class="icon">
      <i class="qi-tropical-cyclone"></i>
    <div class="label">tropical-cyclone</div>
  </div>
    <div class="icon">
      <i class="qi-fire-danger"></i>
    <div class="label">fire-danger</div>
  </div>
    <div class="icon">
      <i class="qi-flooding-in-the-northern-new-territories"></i>
    <div class="label">flooding-in-the-northern-new-territories</div>
  </div>
    <div class="icon">
      <i class="qi-cold-weather"></i>
    <div class="label">cold-weather</div>
  </div>
    <div class="icon">
      <i class="qi-wind"></i>
    <div class="label">wind</div>
  </div>
    <div class="icon">
      <i class="qi-snow-ice"></i>
    <div class="label">snow-ice</div>
  </div>
    <div class="icon">
      <i class="qi-fog"></i>
    <div class="label">fog</div>
  </div>
    <div class="icon">
      <i class="qi-coastal-event"></i>
    <div class="label">coastal-event</div>
  </div>
    <div class="icon">
      <i class="qi-forest-fire"></i>
    <div class="label">forest-fire</div>
  </div>
    <div class="icon">
      <i class="qi-rain-warning"></i>
    <div class="label">rain-warning</div>
  </div>
    <div class="icon">
      <i class="qi-rain-flood"></i>
    <div class="label">rain-flood</div>
  </div>
    <div class="icon">
      <i class="qi-freezing-rain-icing"></i>
    <div class="label">freezing-rain-icing</div>
  </div>
    <div class="icon">
      <i class="qi-ground-frost"></i>
    <div class="label">ground-frost</div>
  </div>
    <div class="icon">
      <i class="qi-dust-raising-winds"></i>
    <div class="label">dust-raising-winds</div>
  </div>
    <div class="icon">
      <i class="qi-strong-surface-winds"></i>
    <div class="label">strong-surface-winds</div>
  </div>
    <div class="icon">
      <i class="qi-hot-day"></i>
    <div class="label">hot-day</div>
  </div>
    <div class="icon">
      <i class="qi-warm-night"></i>
    <div class="label">warm-night</div>
  </div>
    <div class="icon">
      <i class="qi-cold-day"></i>
    <div class="label">cold-day</div>
  </div>
    <div class="icon">
      <i class="qi-thunderstorm-and-lightning"></i>
    <div class="label">thunderstorm-and-lightning</div>
  </div>
    <div class="icon">
      <i class="qi-hailstorm"></i>
    <div class="label">hailstorm</div>
  </div>
    <div class="icon">
      <i class="qi-sea-area-warning"></i>
    <div class="label">sea-area-warning</div>
  </div>
    <div class="icon">
      <i class="qi-fishermen-warning"></i>
    <div class="label">fishermen-warning</div>
  </div>
    <div class="icon">
      <i class="qi-low-humidity"></i>
    <div class="label">low-humidity</div>
  </div>
    <div class="icon">
      <i class="qi-accumulated-rain"></i>
    <div class="label">accumulated-rain</div>
  </div>
    <div class="icon">
      <i class="qi-hazardous-surf-warning"></i>
    <div class="label">hazardous-surf-warning</div>
  </div>
    <div class="icon">
      <i class="qi-marine-wind-warning"></i>
    <div class="label">marine-wind-warning</div>
  </div>
    <div class="icon">
      <i class="qi-road-weather-alert"></i>
    <div class="label">road-weather-alert</div>
  </div>
    <div class="icon">
      <i class="qi-thunder-rain"></i>
    <div class="label">thunder-rain</div>
  </div>
    <div class="icon">
      <i class="qi-thunder-rain-and-fog"></i>
    <div class="label">thunder-rain-and-fog</div>
  </div>
    <div class="icon">
      <i class="qi-damaging-winds"></i>
    <div class="label">damaging-winds</div>
  </div>
    <div class="icon">
      <i class="qi-veld-fire-conditions"></i>
    <div class="label">veld-fire-conditions</div>
  </div>
    <div class="icon">
      <i class="qi-weather-advisory"></i>
    <div class="label">weather-advisory</div>
  </div>
    <div class="icon">
      <i class="qi-severe-weather-warning"></i>
    <div class="label">severe-weather-warning</div>
  </div>
    <div class="icon">
      <i class="qi-warning-default"></i>
    <div class="label">warning-default</div>
  </div>
    <div class="icon">
      <i class="qi-sunny-fill"></i>
    <div class="label">sunny-fill</div>
  </div>
    <div class="icon">
      <i class="qi-cloudy-fill"></i>
    <div class="label">cloudy-fill</div>
  </div>
    <div class="icon">
      <i class="qi-few-clouds-fill"></i>
    <div class="label">few-clouds-fill</div>
  </div>
    <div class="icon">
      <i class="qi-partly-cloudy-fill"></i>
    <div class="label">partly-cloudy-fill</div>
  </div>
    <div class="icon">
      <i class="qi-overcast-fill"></i>
    <div class="label">overcast-fill</div>
  </div>
    <div class="icon">
      <i class="qi-clear-night-fill"></i>
    <div class="label">clear-night-fill</div>
  </div>
    <div class="icon">
      <i class="qi-cloudy-night-fill"></i>
    <div class="label">cloudy-night-fill</div>
  </div>
    <div class="icon">
      <i class="qi-few-clouds-night-fill"></i>
    <div class="label">few-clouds-night-fill</div>
  </div>
    <div class="icon">
      <i class="qi-partly-cloudy-night-fill"></i>
    <div class="label">partly-cloudy-night-fill</div>
  </div>
    <div class="icon">
      <i class="qi-shower-rain-fill"></i>
    <div class="label">shower-rain-fill</div>
  </div>
    <div class="icon">
      <i class="qi-heavy-shower-rain-fill"></i>
    <div class="label">heavy-shower-rain-fill</div>
  </div>
    <div class="icon">
      <i class="qi-thundershower-fill"></i>
    <div class="label">thundershower-fill</div>
  </div>
    <div class="icon">
      <i class="qi-heavy-thunderstorm-fill"></i>
    <div class="label">heavy-thunderstorm-fill</div>
  </div>
    <div class="icon">
      <i class="qi-thundershower-with-hail-fill"></i>
    <div class="label">thundershower-with-hail-fill</div>
  </div>
    <div class="icon">
      <i class="qi-light-rain-fill"></i>
    <div class="label">light-rain-fill</div>
  </div>
    <div class="icon">
      <i class="qi-moderate-rain-fill"></i>
    <div class="label">moderate-rain-fill</div>
  </div>
    <div class="icon">
      <i class="qi-heavy-rain-fill"></i>
    <div class="label">heavy-rain-fill</div>
  </div>
    <div class="icon">
      <i class="qi-extreme-rain-fill"></i>
    <div class="label">extreme-rain-fill</div>
  </div>
    <div class="icon">
      <i class="qi-drizzle-rain-fill"></i>
    <div class="label">drizzle-rain-fill</div>
  </div>
    <div class="icon">
      <i class="qi-storm-fill"></i>
    <div class="label">storm-fill</div>
  </div>
    <div class="icon">
      <i class="qi-heavy-storm-fill"></i>
    <div class="label">heavy-storm-fill</div>
  </div>
    <div class="icon">
      <i class="qi-severe-storm-fill"></i>
    <div class="label">severe-storm-fill</div>
  </div>
    <div class="icon">
      <i class="qi-freezing-rain-fill"></i>
    <div class="label">freezing-rain-fill</div>
  </div>
    <div class="icon">
      <i class="qi-light-to-moderate-rain-fill"></i>
    <div class="label">light-to-moderate-rain-fill</div>
  </div>
    <div class="icon">
      <i class="qi-moderate-to-heavy-rain-fill"></i>
    <div class="label">moderate-to-heavy-rain-fill</div>
  </div>
    <div class="icon">
      <i class="qi-heavy-rain-to-storm-fill"></i>
    <div class="label">heavy-rain-to-storm-fill</div>
  </div>
    <div class="icon">
      <i class="qi-storm-to-heavy-storm-fill"></i>
    <div class="label">storm-to-heavy-storm-fill</div>
  </div>
    <div class="icon">
      <i class="qi-heavy-to-severe-storm-fill"></i>
    <div class="label">heavy-to-severe-storm-fill</div>
  </div>
    <div class="icon">
      <i class="qi-shower-rain-night-fill"></i>
    <div class="label">shower-rain-night-fill</div>
  </div>
    <div class="icon">
      <i class="qi-heavy-shower-rain-night-fill"></i>
    <div class="label">heavy-shower-rain-night-fill</div>
  </div>
    <div class="icon">
      <i class="qi-rain-fill"></i>
    <div class="label">rain-fill</div>
  </div>
    <div class="icon">
      <i class="qi-light-snow-fill"></i>
    <div class="label">light-snow-fill</div>
  </div>
    <div class="icon">
      <i class="qi-moderate-snow-fill"></i>
    <div class="label">moderate-snow-fill</div>
  </div>
    <div class="icon">
      <i class="qi-heavy-snow-fill"></i>
    <div class="label">heavy-snow-fill</div>
  </div>
    <div class="icon">
      <i class="qi-snowstorm-fill"></i>
    <div class="label">snowstorm-fill</div>
  </div>
    <div class="icon">
      <i class="qi-sleet-fill"></i>
    <div class="label">sleet-fill</div>
  </div>
    <div class="icon">
      <i class="qi-rain-and-snow-fill"></i>
    <div class="label">rain-and-snow-fill</div>
  </div>
    <div class="icon">
      <i class="qi-shower-snow-fill"></i>
    <div class="label">shower-snow-fill</div>
  </div>
    <div class="icon">
      <i class="qi-snow-flurry-fill"></i>
    <div class="label">snow-flurry-fill</div>
  </div>
    <div class="icon">
      <i class="qi-light-to-moderate-snow-fill"></i>
    <div class="label">light-to-moderate-snow-fill</div>
  </div>
    <div class="icon">
      <i class="qi-moderate-to-heavy-snow-fill"></i>
    <div class="label">moderate-to-heavy-snow-fill</div>
  </div>
    <div class="icon">
      <i class="qi-heavy-snow-to-snowstorm-fill"></i>
    <div class="label">heavy-snow-to-snowstorm-fill</div>
  </div>
    <div class="icon">
      <i class="qi-shower-snow-night-fill"></i>
    <div class="label">shower-snow-night-fill</div>
  </div>
    <div class="icon">
      <i class="qi-snow-flurry-night-fill"></i>
    <div class="label">snow-flurry-night-fill</div>
  </div>
    <div class="icon">
      <i class="qi-snow-fill"></i>
    <div class="label">snow-fill</div>
  </div>
    <div class="icon">
      <i class="qi-mist-fill"></i>
    <div class="label">mist-fill</div>
  </div>
    <div class="icon">
      <i class="qi-foggy-fill"></i>
    <div class="label">foggy-fill</div>
  </div>
    <div class="icon">
      <i class="qi-haze-fill"></i>
    <div class="label">haze-fill</div>
  </div>
    <div class="icon">
      <i class="qi-sand-fill"></i>
    <div class="label">sand-fill</div>
  </div>
    <div class="icon">
      <i class="qi-dust-fill"></i>
    <div class="label">dust-fill</div>
  </div>
    <div class="icon">
      <i class="qi-duststorm-fill"></i>
    <div class="label">duststorm-fill</div>
  </div>
    <div class="icon">
      <i class="qi-sandstorm-fill"></i>
    <div class="label">sandstorm-fill</div>
  </div>
    <div class="icon">
      <i class="qi-dense-fog-fill"></i>
    <div class="label">dense-fog-fill</div>
  </div>
    <div class="icon">
      <i class="qi-strong-fog-fill"></i>
    <div class="label">strong-fog-fill</div>
  </div>
    <div class="icon">
      <i class="qi-moderate-haze-fill"></i>
    <div class="label">moderate-haze-fill</div>
  </div>
    <div class="icon">
      <i class="qi-heavy-haze-fill"></i>
    <div class="label">heavy-haze-fill</div>
  </div>
    <div class="icon">
      <i class="qi-severe-haze-fill"></i>
    <div class="label">severe-haze-fill</div>
  </div>
    <div class="icon">
      <i class="qi-heavy-fog-fill"></i>
    <div class="label">heavy-fog-fill</div>
  </div>
    <div class="icon">
      <i class="qi-extra-heavy-fog-fill"></i>
    <div class="label">extra-heavy-fog-fill</div>
  </div>
    <div class="icon">
      <i class="qi-hot-fill"></i>
    <div class="label">hot-fill</div>
  </div>
    <div class="icon">
      <i class="qi-cold-fill"></i>
    <div class="label">cold-fill</div>
  </div>
    <div class="icon">
      <i class="qi-unknown-fill"></i>
    <div class="label">unknown-fill</div>
  </div>
</div>

</body>
</html>
